import React, { useEffect, useState } from 'react'
import { Row, Col, Card, PageHeader, List } from 'antd';
import http from '../../util/http';
import _ from "lodash"
export default function Tourist() {
    const [list, setList] = useState([])
    useEffect(() => {
        http.get("/news?publishState=2&_expand=category").then(res => {
            // console.log(res.data)
            const arr = Object.entries(_.groupBy(res.data, (item) => { return item.category.title }))
            setList(arr)
        })
    }, [])
    console.log(list)
    return (
        <div style={{ width: "95%", margin: "0 auto" }}>
            <PageHeader
                className="site-page-header"
                title="全球大新闻"
                subTitle="查看新闻"
            />
            <Row gutter={[24, 100]}>
                {
                    list.map(item => {
                        return <Col span={8} key={item[0]}>
                            <Card title={item[0]} bordered hoverable={true}>
                                <List
                                    size="small"
                                    dataSource={item[1]}
                                    renderItem={(item) => <List.Item>
                                        <a href={`/touristDetail/${item.id}`}>{item.title}</a>
                                    </List.Item>}
                                    pagination={{
                                        pageSize: 3
                                    }}
                                />
                            </Card>
                        </Col>
                    })
                }
            </Row>
        </div>
    )
}
